<template>
  <div>
    <headers title="地图找房"></headers>
    <!-- scroll-wheel-zoom 允许滚轮缩放鼠标 -->
    <!-- dragging 允许拖拽 -->
    <!-- zoom 缩放等级 -->
    <!-- center 定位 -->
    <baidu-map
      scroll-wheel-zoom
      class="bm-view"
      :dragging="false"
      :zoom="zomm"
      :center="cityL || setcityL"
    >
      <!-- 自定义覆盖物 -->
      <!-- pane 自定义覆盖物所在容器。包含 floatPane、markerMouseTarget、floatShadow、labelPane、markerPane、markerShadow、mapPane 共 7 种合法值 -->
      <!-- draw 地图发生改变时触发此事件 -->
      <!--  .native修饰符就是用来注册元素的原生事件而不是组件自定义事件的 -->
      <bm-overlay
        v-for="(item, index) in oneMapList"
        :key="index"
        pane="labelPane"
        class="sample"
        :class="{ rect: islast }"
        @draw="draw(item, $event)"
        @click.native="myGetNewCityMap(item)"
      >
        <div class="rect-content">
          <span :class="{ rect: islast }">{{ item.label }}</span>
          <span>{{ item.count }}套</span>
        </div>
      </bm-overlay>
      <!-- 比例尺 -->
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
      <!-- 缩放 -->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
      <!-- 定位 -->
      <bm-geolocation
        anchor="BMAP_ANCHOR_TOP_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <!--  底部弹出层 -->
      <van-popup v-model="isshow" position="bottom" :style="{ height: '40%' }">
        <van-cell class="cell-house" title="房屋列表">
          <template #right-icon>
            <span @click="$router.push('/house')">更多房源</span>
          </template>
        </van-cell>
        <house-item
          v-for="(item, index) in houseList"
          :key="index"
          :obj="item"
        ></house-item>
      </van-popup>
    </baidu-map>
  </div>
</template>

<script>
import Headers from '@/components/Headers.vue'
import { mapState } from 'vuex'
import { areaMapAPI, housesAPI } from '@/api'
import HouseItem from '@/components/HouseItem.vue'
export default {
  name: '',
  components: {
    Headers,
    HouseItem
  },
  props: {},
  data() {
    return {
      oneMapList: [],
      nearby: {
        radius: 1000
      },
      cityL: this.cityName,
      zomm: 11,
      active: false,
      islast: false,
      value: null,
      // 房屋信息列表
      houseList: [],
      isshow: false
    }
  },
  computed: {
    ...mapState(['myCity', 'cityName']),
    setcityL() {
      return this.myCity.label
    }
  },
  watch: {},
  created() {
    this.areaMap()
  },
  methods: {
    // draw 地图改变时触发
    // item 当前城市点击的子项
    draw(item, { el, BMap, map }) {
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(item.coord.longitude, item.coord.latitude)
      )
      el.style.left = pixel.x - 60 + 'px'
      el.style.top = pixel.y - 20 + 'px'
    },
    //  获取城市信息
    async areaMap() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const { body } = await areaMapAPI(this.myCity.value)
      this.oneMapList = body
      this.$toast.clear()
    },
    // coord 当前城市点击的子项经纬度
    // value 当前城市点击的子集城市名
    async myGetNewCityMap({ coord, value }) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      // 判断缩放倍数是不是不等于16，发送请求获得当前城市子集城市信息
      if (this.zomm !== 16) {
        const { body } = await areaMapAPI(this.myCity.value)
        this.oneMapList = body
        this.cityL = {
          lat: coord.latitude,
          lng: coord.longitude
        }
      } else {
        this.cityL = {
          lat: coord.latitude,
          lng: coord.longitude
        }
        // 如果为16 就开始渲染房屋列表
        const { body } = await housesAPI({ cityId: value })
        this.houseList = body.list
        this.isshow = true
      }
      // 为11就将缩放比例调为12，并将当前子城市名存起来
      if (this.zomm === 11) {
        this.zomm = 12
        this.value = value
        // 为12就将缩放比例调为16，并且展示房屋情况
      } else if (this.zomm === 12) {
        this.islast = true
        this.zomm = 16
        // 为16就将缩放比例调为18
      } else if (this.zomm === 16) {
        this.zomm = 18
      }
      this.$toast.clear()
    }
  }
}
</script>

<style scoped lang="less">
:deep(.bm-view) {
  width: 100%;
  height: calc(100vh - 45px);
}
.sample {
  width: 70px;
  height: 70px;
  padding: 2px !important;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  line-height: 20px;
  box-shadow: 0 0 2.5px #1db879;
  color: #fff;
  text-align: center;
  padding: 5px;
  position: absolute;
}
.rect-content {
  width: 66px;
  height: 66px;
  font-size: 12px;
  border-radius: 50%;
  background: #1db879;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  span {
    width: 66px;
    height: 20px;
  }
}
.rect {
  display: flex;
  width: 100px;
  height: 20px;
  padding: 0;
  background: rgba(12, 181, 106, 0.9);
  color: #fff;
  font-size: 12px;
  border-radius: 2.5px;
  margin: 2.5px;
  .rect-content {
    width: 100%;
    height: 100%;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    span {
      width: 50%;
      height: 100%;
    }
  }
}
.cell-house {
  height: 65.5px;
  background-color: #c0c0c2;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
